<template>
  <span class="svg-container">
    <el-popover placement="bottom" width="250" trigger="click">
      <span slot="reference" class="svg-container">
        <!-- <i slot="reference"
           class="el-icon-s-operation cursor-pointer"/> -->
        <svg-icon icon-class="funnel" />
      </span>
      <div class="popover-setting">
        <h3 v-show="list.conditions">{{ $t('modules.tms.terminal.conditions_filter') }}</h3>
        <div v-show="list.conditions" class="bg-gray-200 h-px" style="margin: 5px -12px" />
        <el-checkbox-group v-model="settings.conditions" v-show="list.conditions" @change="saveToLocal">
          <el-checkbox
            v-for="condition in list.conditions"
            :key="condition.code"
            :label="condition.code"
          >{{ condition.title }}</el-checkbox>
        </el-checkbox-group>
        <h3 v-show="list.columns">{{ $t('modules.tms.terminal.table_column_filter') }}</h3>
        <div v-show="list.columns" class="bg-gray-200 h-px" style="margin: 5px -12px" />
        <el-checkbox-group v-model="settings.columns" v-show="list.columns" @change="saveToLocal">
          <el-checkbox v-for="column in list.columns" :key="column.code" :label="column.code">{{ column.title }}</el-checkbox>
        </el-checkbox-group>
      </div>
    </el-popover>
  </span>
</template>

<script>
  import { setDomainValue, getDomainValue } from './local-storage-util'
  export default {
    computed: {
    },
    data() {
      return {
        settings: {
          conditions: [],
          columns: []
        },
        rootNode: {}
      }
    },
    component: [
      setDomainValue,
      getDomainValue
    ],
    props: {
      /**
       * 展示可供选择的列表
       */
      list: {
        conditions: Array,
        columns: Array,
      },
      /**
       * 存储在 local storage 里面的域
       */
      domain: String,

      /**
       * 当没在 local storage 中没有取到对应的配置时，使用此配置
       */
      defaultSetting: {
        conditions: Array,
        columns: Array,
      }
    },
    methods: {
      saveToLocal() {
        setDomainValue(this.domain, this.settings)
        this.$emit('update:settings', this.settings)
      }
    },
    mounted() {
      if (this.domain == undefined) {
        alert("The domain parameter is not set")
        return
      }
      this.rootNode = this.$store.getters['pageSettings'];
      this.appStoreSetting = getDomainValue(this.rootNode, this.domain, this.defaultSetting || this.settings);
      this.settings.conditions = this.appStoreSetting['conditions']
      this.settings.columns = this.appStoreSetting['columns']
      this.$emit('update:settings', this.settings);
    }
  }
</script>
